<script setup>
	import { onMounted, onUnmounted, ref } from 'vue';
	import { useUserStore } from '@/store/userInfo';
	import { randomString } from '@/untils/randomString.js';
	import { privacyAgreement, vipServer } from '@/untils/ag.js';
	import { useShopStore } from '@/store/shop';
	// 用户store
	const userStore = useUserStore( )
	// 商户store
	const shopStore = useShopStore( )
	const uniIdCo = uniCloud.importObject( 'uni-id-co' )
	// 隐私同意按钮
	const aloneChecked = ref( false )
	// 手机号一键登录
	const getphonenumber = ( e ) => {
		uni.showModal( {
			title: '提示',
			content: '点击确定，代表您同意授权协议并登录',
			success( res ) {
				if ( res.confirm ) {
					// 同意协议
					aloneChecked.value = true
					// 手机号登录调用
					moibleLogin( e )
				}
			}
		} )
	}
	// 手机号登录
	const moibleLogin = async ( e ) => {
		await uniIdCo.loginByWeixinMobile( {
			phoneCode: e.detail.code
		} ).then( result => {
			// 如果是注册生成一个随机用户名
			if ( result.type === 'register' ) {
				const randomUsername = randomString( )
				updateUsername( result.uid, randomUsername )
			}
			// 如果登录成功获取用户信息
			if ( result.errCode === 0 ) {
				userInfoGet( result.uid )
				uni.showToast( {
					mask: true,
					title: '登录成功',
					icon: "success"
				} )
				// 授权成功并登录
				tiaozhuan( )
			}
		} )
	}
	// 声明一个定时器的变量
	let loginTimer
	// 延迟登录
	const tiaozhuan = ( ) => {
		loginTimer = setTimeout( ( ) => {
			uni.switchTab( {
				url: "/pages/my/my"
			} )
		}, 800 )
	}

	// 注册时更新用户的username
	const updateUsername = async ( uid, randomUsername ) => {
		const res = await userInfoApi.update( uid, randomUsername )
		console.log( res )
	}
	// 获取当前登录的用户信息
	const userInfoApi = uniCloud.importObject( 'userInfo' )
	const userInfoGet = async ( uid ) => {
		const res = await userInfoApi.get( uid )
		console.log( res )
		const tempData = {
			uid,
			mobile: res.data[ 0 ].mobile,
			role: res.data[ 0 ].role,
			username: res.data[ 0 ].username,
		}
		userStore.setUserinfo( tempData )
	}
	// 在组件销毁时清理定时器
	onUnmounted( ( ) => {
		if ( loginTimer ) {
			clearTimeout( loginTimer )
			loginTimer = null // 清除引用
		}
	} )

	// 服务和隐私协议
	const navigateToAgreement = ( type ) => {
		let url = ''
		if ( type === 'vipServer' ) {
			url = vipServer // 会员服务协议链接
		} else if ( type === 'privacyAgreement' ) {
			url = privacyAgreement // 隐私权政策链接
		}

		// 使用 `web-view` 打开协议页面
		uni.navigateTo( {
			url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
		} )
	}
</script>
<template>
	<view class="login">
		<!-- 头部logo -->
		<view class="head">
			<view class="logo">
				<image :src="shopStore.shopInfo.shop_avatar" mode="aspectFill"></image>
			</view>
			<view class="name">
				{{shopStore.shopInfo.shop_name}}
			</view>
		</view>
		<!-- 登录 -->
		<view class="loginBtn">
			<!-- 登录按钮 -->
			<button class="btn" open-type="getPhoneNumber"
				@getphonenumber="getphonenumber">手机号一键登录</button>
			<!-- 隐私协议 -->
			<view class="agree">
				<up-checkbox activeColor="#46b0fe" class="checkbox" name="agree" usedAlone
					v-model:checked="aloneChecked">
				</up-checkbox>
				<view class="text">
					<text>若您手机号未注册,登录时将自动注册,且代表您同意</text>
					<text style="color:#46b0fe;font-size: 28rpx;"
						@tap="navigateToAgreement('vipServer')">会员服务协议</text>
					<text>和</text>
					<text style="color:#46b0fe;font-size: 28rpx;"
						@tap="navigateToAgreement('privacyAgreement')">隐私权政策</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.login {
		@include pageStyle;

		/*头部logo*/
		.head {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 200rpx;

			.logo {
				margin-bottom: 16rpx;
				width: 140rpx;
				height: 140rpx;
				overflow: hidden;
				border-radius: 24rpx;
			}

			.name {
				color: $text-font-color-1;
			}
		}

		/*登录按钮*/
		.loginBtn {
			padding: 32rpx;

			.btn {
				background: linear-gradient(to right, #46b0fe, #91dbe6);
				color: #fff;
				border-radius: 60rpx;
				border: none;
			}

			/*同意*/
			.agree {
				display: flex;
				flex-wrap: nowrap;
				align-items: flex-start;
				margin-top: 32rpx;
				font-size: 24rpx;
				color: $text-font-color-3;

				.checkbox {}

				.text {
					flex: 1;
				}

			}
		}
	}
</style>